<template>
  <div class="sksj-layout">
    <div class="title">
      <div class="back" @click="onBack">
        <img src="./img/back.png" alt="" />
      </div>
      <div class="title-content">
        <img style="margin-left: 15vw;" src="./img/logo.png" alt="" />
        <span>走访人员轨迹查询</span>
        <em></em>
        <i
          class="font"
        >{{ date }} <i>{{ time }}</i></i
        >
      </div>
    </div>
    <img src="./img/title-line.png" alt="" />
    <div class="content">
      <div class="left" :style="{ width: zhedieWidth, minWidth: zhedieMinWidth }">
        <div v-show="zhedieShow" class="left-content">
          <div class="title">
            <div class="title-name" @click="toggle(1)">走访人员</div>
            <div class="control">
              <!-- <img src="./img/right-angle.png" /> -->
              <img src="./img/zhedie.png" @click="_closeZhedie" />
            </div>
          </div>
          <SearchTree
            ref="searchTree"
            :data="treeData"
            :defaultdKeys="departmentId"
            @selected="onSelected"
            @checked="onChecked"
            style="padding:0 10px; overflow: hidden;"
          />
          <a-config-provider>
            <template #renderEmpty>
              <div style="text-align: center;padding: 100px 0;">
                <img src="./img/no-data.png" style="width: 60px;margin-bottom: 22px;" />
                <p style="color: #fff;">暂无数据</p>
              </div>
            </template>
          </a-config-provider>
        </div>
        <div class="open-left" v-show="openShow">
          <img src="./img/zhedie.png" @click="_openZhedie" />
        </div>
      </div>
      <Map ref="mapDrawId" />
      <a-spin :spinning="mapSpinning" v-if="mapSpinning" />
      <div class="queryBox">
        <a-range-picker
          style="margin-right:20px;"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          @change="onChange"
          v-model="checkDate"
          show-time
          allowClear
        />
        <a-button style="margin-right:20px;" type="primary" :loading="mapSpinning" @click="onQuery">查询</a-button>
        <a-button style="margin-right:20px;" type="primary" @click="onReset">重置</a-button>
      </div>
      <!-- <div class="tlBox">
      <p>图例说明</p>
      <div class="box">
        <div>
          <img src="./img/icon1.png" />
          <p class="p1">起点</p>
        </div>
        <div>
          <img src="./img/icon3.png" />
          <p class="p2">终点</p>
        </div>
      </div>
    </div> -->
    </div>
  </div>
</template>

<script>
// import { list, detail } from "../../api/daping/jzyzt.js";
import Map from '@/views/xlgc/modules/map'
import SearchTree from './components/SearchTree'
// import base from "@/api/personAnalysis/base";
// import personnelTesting from "@/api/manageService/personnelTesting";
// import { getUser } from "@/utils/token";
import moment from 'moment'
export default {
  components: {
    SearchTree,
    Map
  },
  data() {
    return {
      modules: [
        'esri/Map',
        'esri/WebMap',
        'esri/widgets/Locate',
        'esri/widgets/Track',
        'esri/layers/TileLayer',
        'esri/views/MapView',
        'esri/Graphic',
        'esri/layers/GraphicsLayer',
        'esri/layers/FeatureLayer',
        'esri/PopupTemplate',
        'esri/widgets/Locate',
        'esri/widgets/Track',
        'esri/widgets/Sketch'
      ],
      map: {},
      gisConstructor: {},
      listSearchData: {
        queryType: 1,
        alarmPerson: ''
      },
      data: [],
      treeData1: [], // 人员列表数组
      treeData2: [], // 异地管控人员数组
      currentRow: '',
      is_check: false,
      zhedieWidth: 0,
      zhedieMinWidth: '350px',
      zhedieShow: true,
      openShow: false,
      /* 区域流量 */
      // 热力图数据
      hotMapData: [],
      currentData: {},
      detailShow: false,
      detailWidth: 0,
      detailMinWidth: 0,
      haveContactInfors: false,
      detailData: {
        monitors: []
      },
      departmentId1: '', // 人员列表-选中的id
      departmentId2: '', // 异地管控人员-选中的id
      pageFilter: {
        selectBeginTimeStr: '',
        selectEndTimeStr: '',
        selectPersonVOList: []
      },
      date: '',
      time: '',
      checkedKeys: [],
      mapSpinning: false,
      checkDate: [],
      manInfoArr: [], // 关联人员头像和轨迹点，手机号码比对
      personListType: 1 // 1，人员列表 2，异地管控人员
      // phoneArr:[]
    }
  },
  async created() {
    this._setDate()
    // let areaParam = {};
    // if (getUser().jobName !== "POSITION_009") {
    //   // 非专干
    //   areaParam = { deptKey: 1 };
    // } else {
    //   // 专干，传专干id
    //   areaParam = { deptKey: 0, belongManagerId: getUser().userId };
    // }
    // await this.getArea(areaParam);
    // await this.getPersonList(areaParam);
  },
  computed: {
    treeData() {
      return this.personListType === 1 ? this.treeData1 : this.personListType === 2 ? this.treeData2 : []
    },
    departmentId() {
      return this.personListType === 1 ? this.departmentId1 : this.personListType === 2 ? this.departmentId2 : ''
    }
  },
  methods: {
    _setDate() {
      this.timer = setInterval(() => {
        this.date = moment().format('YYYY-MM-DD')
        this.time = moment().format('HH:mm:ss')
      }, 999)
    },
    onChange(date, dateString) {
      if (dateString.length > 0) {
        this.pageFilter.selectBeginTimeStr = dateString[0]
        this.pageFilter.selectEndTimeStr = dateString[1]
      }
    },
    // 人员列表区域
    async getArea(param) {
      let res = await base.getTrackSjskPersonList(param)
      if (res.status == 200 && res.data !== null && res.data.length > 0) {
        this.treeData1 = res.data
        // 第一次传根部departmentId
        this.departmentId1 = res.data[0].key
        this.departmentId2 = ''
      } else {
        this.$message.warning('行政区域无数据')
      }
    },
    // 异地管控人员区域
    async getPersonList(param) {
      let res = await base.getRemoteTrackSjskPersonList(param)
      if (res.status == 200 && res.data !== null && res.data.length > 0) {
        this.treeData2 = res.data
        // 第一次传根部departmentId
        this.departmentId2 = res.data[0].key
      } else {
        this.$message.warning('异地管控区域无数据')
      }
    },
    onSelected(keys, titles, node) {
      if (keys.length > 0) {
        // 根据手机号码，判断是否已经勾选
        let phone = node.value
        let num = 0
        let len = this.pageFilter.selectPersonVOList.length
        if (len > 0) {
          this.pageFilter.selectPersonVOList.forEach(item => {
            if (phone == item.phone) {
              this.$refs.mapPath.onSelect(node.value) // 传手机号码，然后根据手机号码查询人员的经纬度
            }
          })
        }
      }
    },
    // 勾选人员
    onChecked(checkedInfo) {
      // debugger;
      this.pageFilter.selectPersonVOList = []
      this.manInfoArr = []
      let checkedNodes = checkedInfo.checkedNodes
      if (checkedNodes.length > 0) {
        checkedNodes.forEach(item => {
          this.pageFilter.selectPersonVOList.push({
            name: item.data.props.dataRef.title,
            phone: item.data.props.dataRef.value
          })
          this.manInfoArr.push({
            iconName: item.data.props.dataRef.icon,
            phone: item.data.props.dataRef.value
          })
        })
      }
    },
    // 查询轨迹
    onQuery() {
      if (this.pageFilter.selectPersonVOList.length <= 0) {
        this.$message.warning('请勾选左边行政区域人员')
        return
      }
      if (this.pageFilter.selectPersonVOList.length > 5) {
        this.$message.warning('查询人数不能超过5人')
        return
      }
      if (this.checkDate.length === 0 || this.checkDate === '' || this.checkDate === undefined) {
        this.$message.warning('请选择查询日期')
        return
      }
      this.mapSpinning = true
      personnelTesting
        .trackResult(this.pageFilter)
        .then(res => {
          this.mapSpinning = false
          let phoneArr = []
          if (res && res.status == 200) {
            let data = res.data
            data.forEach(item1 => {
              if (item1.trackInfoList.length > 0) {
                phoneArr.push(item1.phone) // 有轨迹的电话号码数组
              }
            })
            this.$refs.searchTree.drawInfoLine(phoneArr) // 根据电话号码比对来画树右边的线条
            this.$refs.mapPath.onCheck(data, this.manInfoArr)
          }
        })
        .catch(e => {
          this.mapSpinning = false
        })
    },
    onReset() {
      this.checkDate = []
      this.pageFilter.selectBeginTimeStr = ''
      this.pageFilter.selectEndTimeStr = ''
      this.$refs.mapPath.onReset()
    },
    tableLocale({ text, column, record, index }) {
      console.log(text)
      console.log(column)
      console.log(record)
      console.log(index)
    },
    loadingMap(args) {
      console.log(args)
      for (let k in args) {
        let name = this.modules[k].split('/').pop()
        name = name.replace(name[0], name[0].toUpperCase())
        this.gisConstructor[name] = args[k]
      }
      // 官方地图
      // this.map = new this.gisConstructor.Map({
      //   basemap: "streets",
      // });
      // 切片地图
      var mapTileLayer = new this.gisConstructor.TileLayer({
        url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
      })
      this.map = new this.gisConstructor.Map({
        layers: [mapTileLayer]
      })
      // 创建地图
      // this.map=new this.gisConstructor.WebMap({
      //         portalItem:{
      //             id:"00f90f3f3c9141e4bea329679b257142"
      //         }
      //   });

      //  创建view视图
      this.view = new this.gisConstructor.MapView({
        container: 'viewDiv',
        map: this.map,
        center: [109.37, 18.5],
        zoom: 12
      })
      var graphicsLayer = new this.gisConstructor.GraphicsLayer()
      var sketch = new this.gisConstructor.Sketch({
        view: this.view,
        layer: graphicsLayer
      })
      // 工具栏
      this.view.ui.add(sketch, 'top-right')

      // sketch.on("create", function(event) {
      //  console.log(event,"event")
      // });
      // 新版本地图点击事件，旧版本为map.on("click",this.clickHandler)
      this.view.on('click', function(e) {
        var xy = [Math.round(e.mapPoint.longitude * 1000) / 1000, Math.round(e.mapPoint.latitude * 1000) / 1000] // 转换经纬度
        console.log(xy, 'gg')

        let restbtn = document.getElementsByClassName('restxuandian')[0]
        console.log(restbtn)
        // restbtn.style.cursor="pointer"
      })
    },
    _setPersonName(data) {
      console.log(data)
      let str = ''
      let name = data.personName.split(',')
      let phone = data.phone.split(',')
      name.map((item, index) => {
        str += `${item}(${phone[index]})`
      })
      console.log(str)
      return str
    },
    _getList() {
      list(this.listSearchData).then(res => {
        console.log(res.data)
        this.data = res.data.records
      })
    },
    _rowClick(record, index) {
      return {
        on: {
          click: () => {
            this.currentRow = record.id
            this.currentData = record
            this.currentIndex = index + 1 < 10 ? '0' + (index + 1) : index + 1
            this.detailWidth = '70vh'
            this.detailShow = true
            this._getDetail(record)
          }
        }
      }
    },
    _rowClassName(record, index) {
      let className = ''
      if (record.id == this.currentRow) {
        className = 'row-active'
      }
      return className
    },
    _getDetail(item) {
      let data = {
        alarmId: item.id,
        type: item.warnRuleName === '复吸风险预警' ? 1 : 2
      }
      this.haveContactInfors = data.type !== 2
      detail(data).then(res => {
        console.log(res.data)
        this.detailData = res.data
      })
    },
    _closeZhedie() {
      this.zhedieWidth = '0px'
      this.zhedieMinWidth = '0px'
      this.zhedieShow = false
      this.openShow = true
    },
    _openZhedie() {
      this.zhedieWidth = '350px'
      this.zhedieMinWidth = '350px'
      this.zhedieShow = true
      this.openShow = false
    },
    _closeRight() {
      this.detailWidth = 0
      this.detailMinWidth = 0
      this.detailShow = false
    },
    toggle(type) {
      this.personListType = type
    },
    onBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.sksj-layout {
  overflow-y: hidden;
  display: flex;
  flex-flow: column;
  height: 100%;
  background-image: url(./img/bg.png);
  // -webkit-background-size: cover;
  background-size: 100%;
  // min-width: 1200px;
  // min-height: 600px;
  position: relative;

  .title {
    height: 5.555vh;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;

    .back {
      height: 3.7vh;
      width: 4.44vh;
      background-color: rgba(230, 230, 230, 0.2);
      margin-left: 1.851vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      cursor: pointer;

      img {
        width: 2.222vh;
        height: 1.851vh;
      }
    }

    .title-content {
      flex: 1;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2.962vh;

      span {
        font-family: 'microsoft yahei';
        font-weight: bold;
      }

      em {
        height: 3.425vh;
        width: 1px;
        background-color: #a0a0a0;
        margin: 0 1.85vh;
      }

      i {
        font-size: 2.777vh;
        font-style: inherit;
        padding-top: 5px;

        i {
          color: #00ecff;
        }
      }

      img {
        width: 3.333vh;
        height: 3.333vh;
        margin-right: 1.85vh;
      }
    }
  }
  .content {
    flex: 1;
    padding: 2.777vh 1.388vh 1.388vh 1.388vh;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    position: relative;
    .tlBox {
      position: absolute;
      left: 370px;
      bottom: 3vh;
      background-color: #fff;
      padding: 10px 10px 0;
      > p {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .box {
        img {
          display: inline-block;
          width: 15px;
        }
        p {
          display: inline-block;
          margin-left: 20px;
          margin-bottom: 5px;
        }
        .p1 {
          color: #009b4d;
        }
        .p2 {
          color: #ff6501;
        }
      }
    }
    .queryBox {
      position: absolute;
      right: 0;
      top: 4vh;
    }
    .right {
      max-width: 530px;
    }

    .left,
    .right {
      // width: 49.074vh;
      transition: all 0.8s;
      min-width: 530px;
      height: calc(100% - 2.777vh - 1.388vh);
      z-index: 99;
      position: absolute;
      top: 2.777vh;
      left: 1.388vh;
      background-color: rgba(0, 0, 0, 0.6);

      .title {
        width: 100%;
        height: 3.703vh;
        border-bottom: 1px solid rgba(255, 255, 255, 0.6);
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        align-items: center;

        .control {
          // display: flex;
          // flex: 1;
          // justify-content: space-between;
          // align-items: center;

          img {
            margin: 0 1.851vh;
            cursor: pointer;

            &:first-child {
              width: 0.833vh;
              height: 1.388vh;
            }

            &:last-child {
              width: 2.222vh;
              height: 2.037vh;
            }
          }
        }

        .title-name {
          width: fit-content;
          height: 100%;
          color: #fff;
          font-size: 2.037vh;
          font-weight: bold;
          padding: 0 2.777vh;
          display: flex;
          align-items: center;
          cursor: pointer;
          &.cur {
            background-color: #0e6de9;
          }
        }
      }
      .left-content .ant-spin-spinning {
        position: absolute;
        left: 40%;
      }
    }
    /deep/ .ant-tree {
      overflow-y: scroll;
      // height: 80vh;
      height: 78vh;
      padding-bottom: 60px;
    }
    .open-left {
      width: 4.074vh;
      background-color: rgba(0, 0, 0, 0.6);
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 0.926vh;

      img {
        cursor: pointer;
        transform: rotate(180deg);
        width: 2.222vh;
        height: 2.037vh;
      }
    }
    /deep/ .ant-spin-spinning {
      position: fixed;
      top: 50%;
      left: 160px;
    }
  }
}
</style>
<style lang="less">
.blankLayoutBox {
  height: 100%;
}
</style>
